<template>
  <XenPageLayout
    title="个人中心"
    title-align="left"
    :show-back="false"
    navbar-bg-color="#667eea"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    contentStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 0; height: 100vh; display: flex; flex-direction: column;"
  >
    <!-- 个人中心内容 -->
    <view class="mine-container">
      <!-- 欢迎区域 -->
      <view class="welcome-section">
        <view class="user-info">
          <view class="avatar">
            <image
              v-if="userInfo?.PhotoId"
              :src="getImageUrl(userInfo.PhotoId)"
              class="avatar-img"
              mode="aspectFill"
            />
            <uni-icons
              v-else
              type="person-filled"
              size="32"
              color="#ffffff"
            ></uni-icons>
          </view>
          <view class="user-details">
            <text class="greeting">{{ userInfo?.Name || "用户" }}</text>
          </view>
        </view>
      </view>

      <!-- 功能区域 -->
      <view class="function-section">
        <view class="section-header">
          <text class="section-title">账户管理</text>
        </view>

        <view class="function-list">
          <!-- 修改密码 - 仅在非微信小程序中显示 -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="function-item" @click="handleChangePassword">
            <view class="function-item-left">
              <view class="function-icon">
                <uni-icons type="locked" size="20" color="#667eea"></uni-icons>
              </view>
              <text class="function-name">修改密码</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>

          <!-- #endif -->

          <!-- 修改手机号 -->
          <view
            class="function-item"
            @click="handleChangeMobile"
            v-if="!isGuestUser"
          >
            <view class="function-item-left">
              <view class="function-icon mobile-icon">
                <uni-icons type="phone" size="20" color="#3c9cff"></uni-icons>
              </view>
              <text class="function-name">修改手机号</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>

          <!-- 游客绑定手机号 -->
          <view
            class="function-item"
            v-if="isGuestUser"
            @click="handleGuestBind"
          >
            <view class="function-item-left">
              <view class="function-icon guest-bind-icon">
                <uni-icons
                  type="phone-filled"
                  size="20"
                  color="#3c9cff"
                ></uni-icons>
              </view>
              <text class="function-name">游客绑定用户</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
          <!-- 系统版本 -->
          <view class="function-item version-item">
            <view class="function-item-left">
              <view class="function-icon version-icon">
                <uni-icons type="info" size="20" color="#1890ff"></uni-icons>
              </view>
              <text class="function-name">系统版本</text>
            </view>
            <text class="version-text">1.0.14</text>
          </view>

          <!-- 退出登录 - 仅在非微信小程序中显示 -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="function-item logout-item" @click="handleLogout">
            <view class="function-item-left">
              <view class="function-icon logout-icon">
                <uni-icons type="loop" size="20" color="#ff5a5f"></uni-icons>
              </view>
              <text class="function-name">退出登录</text>
            </view>
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>

    <!-- 修改密码弹窗 -->
    <uni-popup ref="passwordPopup" type="center" :mask-click="false">
      <view class="password-popup-container">
        <view class="popup-card">
          <!-- 关闭按钮 -->
          <view class="close-btn" @click="closePasswordPopup">
            <uni-icons type="closeempty" size="24" color="#8f9bb3"></uni-icons>
          </view>

          <!-- 弹窗头部 -->
          <view class="popup-header">
            <text class="popup-title">修改密码</text>
          </view>

          <!-- 表单区域 -->
          <view class="form-section">
            <view class="input-group">
              <view class="input-label">
                <uni-icons type="locked" size="18" color="#667eea"></uni-icons>
                <text class="label-text">原密码</text>
              </view>
              <uni-easyinput
                v-model="passwordForm.oldPassword"
                type="password"
                placeholder="请输入原密码"
                :clearable="false"
                class="custom-input"
              />
            </view>

            <view class="input-group">
              <view class="input-label">
                <uni-icons type="locked" size="18" color="#667eea"></uni-icons>
                <text class="label-text">新密码</text>
              </view>
              <uni-easyinput
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                :clearable="false"
                class="custom-input"
              />
            </view>

            <view class="input-group">
              <view class="input-label">
                <uni-icons type="locked" size="18" color="#667eea"></uni-icons>
                <text class="label-text">确认新密码</text>
              </view>
              <uni-easyinput
                v-model="passwordForm.confirmPassword"
                type="password"
                placeholder="请确认新密码"
                :clearable="false"
                class="custom-input"
              />
            </view>

            <view class="input-group">
              <view class="input-label">
                <uni-icons type="phone" size="18" color="#667eea"></uni-icons>
                <text class="label-text">手机号</text>
              </view>
              <uni-easyinput
                v-model="passwordForm.mobile"
                type="number"
                :maxlength="11"
                placeholder="请输入手机号"
                :clearable="false"
                class="custom-input"
              />
            </view>

            <view class="input-group">
              <view class="input-label">
                <uni-icons type="locked" size="18" color="#667eea"></uni-icons>
                <text class="label-text">验证码</text>
              </view>
              <view class="sms-input-wrapper">
                <uni-easyinput
                  v-model="passwordForm.smsCode"
                  type="number"
                  :maxlength="6"
                  placeholder="请输入验证码"
                  :clearable="false"
                  class="custom-input sms-input"
                />
                <view
                  class="sms-button"
                  :class="{
                    'sms-button--disabled':
                      passwordSmsLoading || passwordCountdown > 0,
                  }"
                  @click="sendPasswordSms"
                >
                  <text class="sms-button-text">
                    {{
                      passwordSmsLoading
                        ? "发送中"
                        : passwordCountdown > 0
                          ? `${passwordCountdown}s`
                          : "获取验证码"
                    }}
                  </text>
                </view>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="popup-actions">
            <view
              class="primary-button"
              :class="{ 'primary-button--loading': passwordLoading }"
              @click="confirmChangePassword"
            >
              <text class="button-text">
                {{ passwordLoading ? "修改中..." : "确认修改" }}
              </text>
              <view v-if="!passwordLoading" class="button-shine"></view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 修改手机号弹窗 -->
    <uni-popup ref="mobilePopup" type="center" :mask-click="false">
      <view class="mobile-popup-container">
        <view class="popup-card">
          <!-- 关闭按钮 -->
          <view class="close-btn" @click="closeMobilePopup">
            <uni-icons type="closeempty" size="24" color="#8f9bb3"></uni-icons>
          </view>

          <!-- 弹窗头部 -->
          <view class="popup-header">
            <text class="popup-title">修改手机号</text>
          </view>

          <!-- 表单区域 -->
          <view class="form-section">
            <view class="input-group">
              <view class="input-label">
                <uni-icons type="phone" size="18" color="#3c9cff"></uni-icons>
                <text class="label-text">原手机号</text>
              </view>
              <uni-easyinput
                v-model="mobileForm.OldPhone"
                type="number"
                :maxlength="11"
                placeholder="请输入原手机号"
                :clearable="false"
                class="custom-input"
              />
            </view>
            <view class="input-group">
              <view class="input-label">
                <uni-icons type="phone" size="18" color="#3c9cff"></uni-icons>
                <text class="label-text">新手机号</text>
              </view>
              <uni-easyinput
                v-model="mobileForm.mobile"
                type="number"
                :maxlength="11"
                placeholder="请输入新手机号"
                :clearable="false"
                class="custom-input"
              />
            </view>

            <view class="input-group">
              <view class="input-label">
                <uni-icons type="locked" size="18" color="#3c9cff"></uni-icons>
                <text class="label-text">验证码</text>
              </view>
              <view class="sms-input-wrapper">
                <uni-easyinput
                  v-model="mobileForm.smsCode"
                  type="number"
                  :maxlength="6"
                  placeholder="请输入验证码"
                  :clearable="false"
                  class="custom-input sms-input"
                />
                <view
                  class="sms-button"
                  :class="{
                    'sms-button--disabled': smsLoading || countdown > 0,
                  }"
                  @click="sendSms"
                >
                  <text class="sms-button-text">
                    {{
                      smsLoading
                        ? "发送中"
                        : countdown > 0
                          ? `${countdown}s`
                          : "获取验证码"
                    }}
                  </text>
                </view>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="popup-actions">
            <view
              class="primary-button"
              :class="{ 'primary-button--loading': mobileLoading }"
              @click="confirmChangeMobile"
            >
              <text class="button-text">
                {{ mobileLoading ? "修改中..." : "确认修改" }}
              </text>
              <view v-if="!mobileLoading" class="button-shine"></view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 游客绑定手机号弹窗 -->
    <uni-popup ref="guestBindPopup" type="center" :mask-click="false">
      <view class="mobile-popup-container">
        <view class="popup-card">
          <!-- 关闭按钮 -->
          <view class="close-btn" @click="closeGuestBindPopup">
            <uni-icons type="closeempty" size="24" color="#8f9bb3"></uni-icons>
          </view>

          <!-- 弹窗头部 -->
          <view class="popup-header">
            <text class="popup-title">游客绑定用户</text>
          </view>

          <!-- 表单区域 -->
          <view class="form-section">
            <view class="input-group">
              <view class="input-label">
                <uni-icons type="phone" size="18" color="#3c9cff"></uni-icons>
                <text class="label-text">新手机号</text>
              </view>
              <uni-easyinput
                v-model="guestBindForm.mobile"
                type="number"
                :maxlength="11"
                placeholder="请输入新手机号"
                :clearable="false"
                class="custom-input"
              />
            </view>

            <view class="input-group">
              <view class="input-label">
                <uni-icons type="locked" size="18" color="#3c9cff"></uni-icons>
                <text class="label-text">验证码</text>
              </view>
              <view class="sms-input-wrapper">
                <uni-easyinput
                  v-model="guestBindForm.smsCode"
                  type="number"
                  :maxlength="6"
                  placeholder="请输入验证码"
                  :clearable="false"
                  class="custom-input sms-input"
                />
                <view
                  class="sms-button"
                  :class="{
                    'sms-button--disabled':
                      guestSmsLoading || guestCountdown > 0,
                  }"
                  @click="sendGuestSms"
                >
                  <text class="sms-button-text">
                    {{
                      guestSmsLoading
                        ? "发送中"
                        : guestCountdown > 0
                          ? `${guestCountdown}s`
                          : "获取验证码"
                    }}
                  </text>
                </view>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="popup-actions">
            <view
              class="primary-button"
              :class="{ 'primary-button--loading': guestBindLoading }"
              @click="confirmGuestBind"
            >
              <text class="button-text">
                {{ guestBindLoading ? "绑定中..." : "确认绑定" }}
              </text>
              <view v-if="!guestBindLoading" class="button-shine"></view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import type { IUserInfo } from "../login/api/interface";
import useMineApi from "./api/mine";
import useLoginApi from "../login/api/login";

// 用户信息
const userInfo = ref<IUserInfo | null>(null);

// 弹窗引用
const passwordPopup = ref();
const mobilePopup = ref();
const guestBindPopup = ref();
const passwordLoading = ref(false);
const mobileLoading = ref(false);
const guestBindLoading = ref(false);
const smsLoading = ref(false);
const guestSmsLoading = ref(false);
const passwordSmsLoading = ref(false);
const countdown = ref(0);
const guestCountdown = ref(0);
const passwordCountdown = ref(0);

// 密码表单数据
const passwordForm = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
  mobile: "",
  smsCode: "",
});

// 手机号表单数据
const mobileForm = reactive({
  OldPhone: "",
  mobile: "",
  smsCode: "",
});

// 游客绑定手机号表单数据
const guestBindForm = reactive({
  mobile: "",
  smsCode: "",
});

// 判断用户是否为游客
const isGuestUser = computed(() => {
  if (!userInfo.value) return false;
  // 游客用户的判断逻辑：ITCode为空、Name包含"游客"字样、或者Name为"匿名"等
  const name = userInfo.value.Name || "";
  const itCode = userInfo.value.ITCode || "";

  // 临时测试：总是显示游客绑定功能 (开发测试用)
  // return true;

  return (
    !itCode ||
    itCode.trim() === "" ||
    name.includes("游客") ||
    name.includes("Guest") ||
    name.includes("匿名") ||
    name.includes("临时") ||
    name.toLowerCase().includes("guest") ||
    name.toLowerCase().includes("visitor")
  );
});

// 获取图片URL - 添加时间戳防止缓存
const getImageUrl = (fileId: string) => {
  if (!fileId) return "";
  const timestamp = Date.now();
  return `${
    import.meta.env.VITE_BASE_URL
  }/api/_file/getfile/${fileId}?t=${timestamp}`;
};

// 验证手机号格式
const validateMobile = (mobile: string) => {
  const mobileReg = /^1[3-9]\d{9}$/;
  return mobileReg.test(mobile);
};

// 打开修改密码弹窗
const handleChangePassword = () => {
  passwordPopup.value.open();
};

// 关闭修改密码弹窗
const closePasswordPopup = () => {
  passwordPopup.value.close();
  // 重置表单
  passwordForm.oldPassword = "";
  passwordForm.newPassword = "";
  passwordForm.confirmPassword = "";
  passwordForm.mobile = "";
  passwordForm.smsCode = "";
  passwordCountdown.value = 0;
};

// 打开修改手机号弹窗
const handleChangeMobile = () => {
  mobilePopup.value.open();
};

// 关闭修改手机号弹窗
const closeMobilePopup = () => {
  mobilePopup.value.close();
  // 重置表单
  mobileForm.OldPhone = "";
  mobileForm.mobile = "";
  mobileForm.smsCode = "";
  countdown.value = 0;
};

// 打开游客绑定手机号弹窗
const handleGuestBind = () => {
  guestBindPopup.value.open();
};

// 关闭游客绑定手机号弹窗
const closeGuestBindPopup = () => {
  guestBindPopup.value.close();
  // 重置表单
  guestBindForm.mobile = "";
  guestBindForm.smsCode = "";
  guestCountdown.value = 0;
};

// 发送验证码
const sendSms = async () => {
  // 验证手机号
  if (!mobileForm.mobile.trim()) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!validateMobile(mobileForm.mobile)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    return;
  }

  try {
    smsLoading.value = true;

    const res = await useMineApi().sendloginsms({
      Mobile: mobileForm.mobile,
      OldPhone: mobileForm.OldPhone,
      Type: "changeMobile",
    });

    if (res.Code === 200) {
      uni.showToast({
        title: "验证码已发送",
        icon: "success",
      });

      // 开始倒计时
      countdown.value = 60;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } else {
      uni.showToast({
        title: res.Message || "发送失败，请重试",
        icon: "none",
      });
    }
  } catch (error: any) {
    console.error("发送验证码失败:", error);
    uni.showToast({
      title: "发送失败，请重试",
      icon: "none",
    });
  } finally {
    smsLoading.value = false;
  }
};

// 发送游客验证码
const sendGuestSms = async () => {
  // 验证手机号
  if (!guestBindForm.mobile.trim()) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!validateMobile(guestBindForm.mobile)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    return;
  }

  try {
    guestSmsLoading.value = true;

    const res = await useMineApi().sendloginsms({
      Mobile: guestBindForm.mobile,
      OldPhone: "",
      Type: "guestBind",
    });

    if (res.Code === 200) {
      uni.showToast({
        title: "验证码已发送",
        icon: "success",
      });

      // 开始倒计时
      guestCountdown.value = 60;
      const timer = setInterval(() => {
        guestCountdown.value--;
        if (guestCountdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } else {
      uni.showToast({
        title: res.Message || "发送失败，请重试",
        icon: "none",
      });
    }
  } catch (error: any) {
    console.error("发送游客验证码失败:", error);
    uni.showToast({
      title: "发送失败，请重试",
      icon: "none",
    });
  } finally {
    guestSmsLoading.value = false;
  }
};

// 发送修改密码验证码
const sendPasswordSms = async () => {
  // 验证手机号
  if (!passwordForm.mobile.trim()) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!validateMobile(passwordForm.mobile)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    return;
  }

  try {
    passwordSmsLoading.value = true;

    const res = await useMineApi().sendloginsms({
      Mobile: passwordForm.mobile,
      Type: "changePassword",
    });

    if (res.Code === 200) {
      uni.showToast({
        title: "验证码已发送",
        icon: "success",
      });

      // 开始倒计时
      passwordCountdown.value = 60;
      const timer = setInterval(() => {
        passwordCountdown.value--;
        if (passwordCountdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } else {
      uni.showToast({
        title: res.Message || "发送失败，请重试",
        icon: "none",
      });
    }
  } catch (error: any) {
    console.error("发送修改密码验证码失败:", error);
    uni.showToast({
      title: "发送失败，请重试",
      icon: "none",
    });
  } finally {
    passwordSmsLoading.value = false;
  }
};

// 确认修改手机号
const confirmChangeMobile = async () => {
  // 表单验证
  if (!mobileForm.mobile.trim()) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!validateMobile(mobileForm.mobile)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    return;
  }

  if (!mobileForm.smsCode.trim()) {
    uni.showToast({
      title: "请输入验证码",
      icon: "none",
    });
    return;
  }

  if (mobileForm.smsCode.length !== 6) {
    uni.showToast({
      title: "验证码为6位数字",
      icon: "none",
    });
    return;
  }

  try {
    mobileLoading.value = true;

    // 调用修改手机号API
    const res = await useMineApi().changemobile({
      Mobile: mobileForm.mobile,
      Code: mobileForm.smsCode,
      OldPhone: mobileForm.OldPhone,
    });
    if (res.Code === 200) {
      uni.showToast({
        title: "手机号修改成功",
        icon: "success",
      });
    } else {
      uni.showToast({
        title: res.Message || "修改失败，请重试",
        icon: "none",
      });
    }

    closeMobilePopup();
  } finally {
    mobileLoading.value = false;
  }
};

// 确认游客绑定手机号
const confirmGuestBind = async () => {
  // 表单验证
  if (!guestBindForm.mobile.trim()) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!validateMobile(guestBindForm.mobile)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    return;
  }

  if (!guestBindForm.smsCode.trim()) {
    uni.showToast({
      title: "请输入验证码",
      icon: "none",
    });
    return;
  }

  if (guestBindForm.smsCode.length !== 6) {
    uni.showToast({
      title: "验证码为6位数字",
      icon: "none",
    });
    return;
  }

  try {
    guestBindLoading.value = true;

    // 调用游客绑定手机号API
    const res = await useLoginApi().GuestBindExistingAccount({
      Mobile: guestBindForm.mobile,
      Code: guestBindForm.smsCode,
    });
    if (res.Code === 200) {
      uni.showToast({
        title: "游客绑定成功",
        icon: "success",
      });

      // 更新token信息
      if (res.Data && res.Data.access_token) {
        uni.setStorageSync("token", res.Data.access_token);
        uni.setStorageSync(
          "tokenExpireTime",
          Date.now() + (res.Data.expires_in || 3600) * 1000,
        );
      }

      // 重新获取用户信息
      try {
        const userInfoRes = await useLoginApi().getUserInfo();
        userInfo.value = userInfoRes;
        uni.setStorageSync("userInfo", userInfoRes);
        console.log("游客绑定后用户信息已更新:", userInfoRes);
      } catch (error) {
        console.error("获取用户信息异常:", error);
      }

      closeGuestBindPopup();
    } else {
      uni.showToast({
        title: res.Message || "绑定失败，请重试",
        icon: "none",
      });
    }
  } finally {
    guestBindLoading.value = false;
  }
};

// 确认修改密码
const confirmChangePassword = async () => {
  // 表单验证
  if (
    !passwordForm.oldPassword ||
    !passwordForm.newPassword ||
    !passwordForm.confirmPassword
  ) {
    uni.showToast({
      title: "请填写完整密码信息",
      icon: "none",
    });
    return;
  }

  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    uni.showToast({
      title: "两次输入的新密码不一致",
      icon: "none",
    });
    return;
  }

  if (passwordForm.newPassword.length < 6) {
    uni.showToast({
      title: "新密码长度不能少于6位",
      icon: "none",
    });
    return;
  }

  // 验证手机号
  if (!passwordForm.mobile.trim()) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!validateMobile(passwordForm.mobile)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    return;
  }

  // 验证短信验证码
  if (!passwordForm.smsCode.trim()) {
    uni.showToast({
      title: "请输入验证码",
      icon: "none",
    });
    return;
  }

  if (passwordForm.smsCode.length !== 6) {
    uni.showToast({
      title: "验证码为6位数字",
      icon: "none",
    });
    return;
  }

  try {
    passwordLoading.value = true;

    // 调用修改密码API
    await useMineApi().ChangePassword({
      OldPassword: passwordForm.oldPassword,
      NewPassword: passwordForm.newPassword,
      NewPasswordComfirm: passwordForm.confirmPassword,
      Mobile: passwordForm.mobile,
      Code: passwordForm.smsCode,
    });

    uni.showToast({
      title: "密码修改成功",
      icon: "success",
    });

    closePasswordPopup();

    // 提示用户重新登录
    setTimeout(() => {
      uni.showModal({
        title: "提示",
        content: "密码修改成功，请重新登录",
        showCancel: false,
        success: () => {
          // 清除本地存储并跳转到登录页
          uni.clearStorageSync();
          uni.reLaunch({
            url: "/pages/login/login",
          });
        },
      });
    }, 1000);
  } finally {
    passwordLoading.value = false;
  }
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        // 清除本地存储
        uni.clearStorageSync();

        uni.showToast({
          title: "已退出登录",
          icon: "success",
        });

        // 跳转到登录页面
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/login/login",
          });
        }, 500);
      }
    },
  });
};

// 页面加载时获取用户信息
onMounted(() => {
  // 从本地存储获取用户信息
  const cachedUserInfo = uni.getStorageSync("userInfo");
  if (cachedUserInfo) {
    userInfo.value = cachedUserInfo;
    console.log("个人中心加载用户信息:", cachedUserInfo);
  }
});
</script>

<style lang="scss" scoped>
.mine-container {
  display: flex;
  flex-direction: column;

  .welcome-section {
    padding: 24px;
    flex-shrink: 0;

    .user-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .avatar {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0; // 防止头像被压缩

        .avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 32px;
          object-fit: cover; // 确保图片比例正确
        }
      }

      .user-details {
        flex: 1;
        min-width: 0; // 允许文本区域收缩

        .greeting {
          display: block;
          color: #ffffff;
          font-size: 20px;
          font-weight: 600;
          word-break: break-all; // 长文本换行
          line-height: 1.3;
        }
      }
    }
  }

  .function-section {
    flex: 1;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 24px;
    min-height: 0;
    display: flex;
    flex-direction: column;

    .section-header {
      margin-bottom: 20px;
      flex-shrink: 0;

      .section-title {
        color: #1a1a1a;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .function-list {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      .function-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #f5f5f5;
        transition: background-color 0.3s ease;

        &:last-child {
          border-bottom: none;
        }

        &:active {
          background-color: #f8f9fa;
        }

        .function-item-left {
          display: flex;
          align-items: center;

          .function-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(102, 126, 234, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
          }

          .mobile-icon {
            background: rgba(60, 156, 255, 0.1);
          }

          .guest-bind-icon {
            background: rgba(60, 156, 255, 0.1);
          }

          .version-icon {
            background: rgba(24, 144, 255, 0.1);
          }

          .logout-icon {
            background: rgba(255, 90, 95, 0.1);
          }

          .function-name {
            color: #1a1a1a;
            font-size: 16px;
            font-weight: 500;
          }
        }

        .version-text {
          color: #1890ff;
          font-size: 14px;
          font-weight: 500;
        }

        &.version-item {
          cursor: default;

          &:active {
            background-color: transparent;
          }
        }

        &.logout-item {
          .function-name {
            color: #ff5a5f;
          }
        }
      }
    }
  }
}

// 弹窗样式
.password-popup-container,
.mobile-popup-container {
  width: 680rpx;
  max-width: 90vw;
  max-height: calc(100vh - 400rpx);
  display: flex;
  flex-direction: column;

  .popup-card {
    background: #ffffff;
    border-radius: 32rpx;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;

    .close-btn {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      width: 48rpx;
      height: 48rpx;
      border-radius: 24rpx;
      background: #f7f8fa;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    .popup-header {
      text-align: center;
      padding: 40rpx 40rpx 20rpx;
      flex-shrink: 0;

      .popup-title {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #2c3e50;
      }
    }

    .form-section {
      padding: 0 40rpx 20rpx;
      flex: 1;
      overflow-y: auto;
      min-height: 0;

      .input-group {
        margin-bottom: 32rpx;

        .input-label {
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;

          .label-text {
            font-size: 28rpx;
            color: #2c3e50;
            font-weight: 500;
            margin-left: 8rpx;
          }
        }

        .custom-input {
          width: auto !important;
          background: #f7f8fa;
          border-radius: 12rpx;
          padding: 16rpx 20rpx;
          border: 2rpx solid transparent;
          transition: all 0.3s ease;

          &:focus {
            border-color: #667eea;
            background: #ffffff;
            box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
          }
        }

        .sms-input-wrapper {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .sms-input {
            flex: 1;
          }

          .sms-button {
            flex-shrink: 0;
            padding: 16rpx 24rpx;
            background: linear-gradient(135deg, #3c9cff, #2979ff);
            border-radius: 12rpx;
            border: none;
            min-width: 200rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4rpx 16rpx rgba(60, 156, 255, 0.3);
            transition: all 0.3s ease;

            &:active {
              transform: scale(0.98);
            }

            .sms-button-text {
              font-size: 26rpx;
              color: #ffffff;
              font-weight: 500;
            }

            &.sms-button--disabled {
              background: #e4e7ed;
              box-shadow: none;

              .sms-button-text {
                color: #a0a4aa;
              }
            }
          }
        }
      }
    }

    .popup-actions {
      padding: 20rpx 40rpx 40rpx;
      flex-shrink: 0;

      .primary-button {
        width: 100%;
        height: 96rpx;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
        }

        .button-text {
          font-size: 32rpx;
          color: #ffffff;
          font-weight: 600;
          position: relative;
          z-index: 1;
        }

        .button-shine {
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
          );
          animation: buttonShine 2s infinite;
        }

        &.primary-button--loading {
          background: #c8c9cc;
          box-shadow: none;

          .button-text {
            color: #ffffff;
          }
        }
      }
    }
  }
}

// 修改手机号弹窗的样式
.mobile-popup-container {
  .form-section {
    .custom-input {
      &:focus {
        border-color: #3c9cff;
        box-shadow: 0 0 0 4rpx rgba(60, 156, 255, 0.1);
      }
    }
  }

  .popup-actions {
    .primary-button {
      background: linear-gradient(135deg, #3c9cff, #2979ff);
      box-shadow: 0 8rpx 24rpx rgba(60, 156, 255, 0.4);
    }
  }
}

@keyframes buttonShine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* 弹窗遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; /* 修改为999 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  padding: 60rpx;
  margin: 60rpx;
  width: 80%;
  max-width: 600rpx;
  position: relative;
  z-index: 1000; /* 确保内容在遮罩之上 */
}
</style>
